import React, { useState, useEffect } from 'react';

const StatusIndicator = ({ center, zoom, showTiles, showVectors }) => {
  const [fps, setFps] = useState(0);
  const [frameCount, setFrameCount] = useState(0);
  const [lastTime, setLastTime] = useState(performance.now());

  // 计算FPS
  useEffect(() => {
    const updateFPS = () => {
      const currentTime = performance.now();
      const deltaTime = currentTime - lastTime;
      
      if (deltaTime >= 1000) { // 每秒更新一次
        setFps(Math.round((frameCount * 1000) / deltaTime));
        setFrameCount(0);
        setLastTime(currentTime);
      } else {
        setFrameCount(prev => prev + 1);
      }
    };

    const animationId = requestAnimationFrame(updateFPS);
    return () => cancelAnimationFrame(animationId);
  }, [lastTime, frameCount]);

  // 格式化坐标显示
  const formatCoordinate = (coord) => {
    return coord.toFixed(4);
  };

  // 获取图层状态文本
  const getLayerStatus = () => {
    const layers = [];
    if (showTiles) layers.push('瓦片');
    if (showVectors) layers.push('矢量');
    return layers.length > 0 ? layers.join(' + ') : '无图层';
  };

  return (
    <div className="status-indicator">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', fontSize: '11px' }}>
        {/* 坐标信息 */}
        <div>
          <div style={{ color: '#a0aec0', marginBottom: '2px' }}>经度</div>
          <div style={{ color: 'white', fontWeight: '500' }}>
            {formatCoordinate(center[0])}°
          </div>
        </div>
        
        <div>
          <div style={{ color: '#a0aec0', marginBottom: '2px' }}>纬度</div>
          <div style={{ color: 'white', fontWeight: '500' }}>
            {formatCoordinate(center[1])}°
          </div>
        </div>
        
        {/* 缩放和FPS */}
        <div>
          <div style={{ color: '#a0aec0', marginBottom: '2px' }}>缩放</div>
          <div style={{ color: 'white', fontWeight: '500' }}>
            {zoom.toFixed(1)}
          </div>
        </div>
        
        <div>
          <div style={{ color: '#a0aec0', marginBottom: '2px' }}>FPS</div>
          <div style={{ 
            color: fps >= 30 ? '#10b981' : fps >= 15 ? '#f59e0b' : '#ef4444',
            fontWeight: '500'
          }}>
            {fps}
          </div>
        </div>
        
        {/* 图层状态 */}
        <div style={{ gridColumn: '1 / -1', marginTop: '4px' }}>
          <div style={{ color: '#a0aec0', marginBottom: '2px' }}>图层</div>
          <div style={{ 
            color: 'white', 
            fontWeight: '500',
            fontSize: '10px'
          }}>
            {getLayerStatus()}
          </div>
        </div>
      </div>
      
      {/* 性能指示器 */}
      <div style={{
        marginTop: '8px',
        height: '2px',
        background: 'rgba(255, 255, 255, 0.1)',
        borderRadius: '1px',
        overflow: 'hidden'
      }}>
        <div style={{
          height: '100%',
          background: fps >= 30 ? '#10b981' : fps >= 15 ? '#f59e0b' : '#ef4444',
          width: `${Math.min(100, (fps / 60) * 100)}%`,
          transition: 'width 0.3s ease'
        }} />
      </div>
    </div>
  );
};

export default StatusIndicator;